<template>
	<view class="page__content">
		<u-navbar :fixed="false" :title="basicInfo.APFunName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff" />

		<view class="page__content__main" style="padding: 10px;">


			<!-- 顶部统计卡片 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" lineWidth="30" :current="tabsCurrent" :list="realCondition"
							@change="changeTopTabs"
							:activeStyle="{ color:'#51d0d0', fontWeight:'500', transform:'scale(1.05)' }" />
					</view>
				</view>
				<view class="commonBox-content">
					<view class="scrollWrap">
						<view v-for="(item,index) in cardData" :key="index" class="scrollWrap-item">
							<view class="y-f">
								<text>{{ item[realCondition[tabsCurrent].tabValueKey] }}</text>
								<text style="margin-top: 8px;font-size: 12px;">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 图表1 -->
			<view class="commonBox">
				<view class="commonBox-title-left" style="width: fit-content !important;">
					<text>前6客户销售额占比</text>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData1" :ChartsStyle="ChartsStyle" />
				</view>
			</view>

			<!-- 图表2 -->
			<view class="commonBox">
				<view class="commonBox-title-left" style="width: fit-content !important;">
					<text>前6客户销量占比</text>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData2" :ChartsStyle="ChartsStyle" />
				</view>
			</view>

			<!-- 图表3 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>销售未出库分析</text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" lineWidth="30" :current="tabsCurrent3" :list="realCondition3"
							@change="changeTopTabs3"
							:activeStyle="{ color:'#51d0d0', fontWeight:'500', transform:'scale(1.05)' }" />
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="bar" :chartData="chartData3" :ChartsStyle="ChartsStyle" />
				</view>
			</view>

			<!-- 图表4 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>销售分析</text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" lineWidth="30" :current="tabsCurrent4" :list="realCondition4"
							@change="changeTopTabs4"
							:activeStyle="{ color:'#51d0d0', fontWeight:'500', transform:'scale(1.05)' }" />
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="line" :chartData="chartData4" :ChartsStyle="ChartsStyle" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, computed } from 'vue';
	import dataInitFun from '@/commonPage/kanban/BIKanban/js/dataInit';
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useInventoryStore } from '@/store';
	const mainStore = useMainStore();
	const inventoryStore = useInventoryStore();
	import mUCharts from '../../components/m-uCharts/m-uCharts.vue';

	const dataInit = dataInitFun;

	const test_chartData = {
		series: [
			{
				data: [{ "name": "一班", "value": 50 }, { "name": "二班", "value": 30 }, { "name": "三班", "value": 20 }, { "name": "四班", "value": 18 }, { "name": "五班", "value": 8 }]
			}
		]
	};
	const test_opts = {
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		dataLabel: true,
		enableScroll: false,
		legend: {
			show: true,
			position: "right",
			lineHeight: 25
		},
		title: {
			name: "收益率",
			fontSize: 15,
			color: "#666666"
		},
		subtitle: {
			name: "70%",
			fontSize: 25,
			color: "#7cb5ec"
		},
		extra: {
			ring: {
				ringWidth: 60,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	};

	// ========== state ==========
	const basicInfo = reactive({ APFunName: ' ' })
	const tabsCurrent = ref(1)
	const realCondition = ref([
		{ name: '去年', tabValueKey: 'oldValue' },
		{ name: '今年', tabValueKey: 'newValue' }
	])
	const cardData = ref<any[]>([])
	const ChartsStyle = reactive({ width: '100%', height: '240px' })

	// 饼图
	const chartData1 = ref<any>({})
	const chartData2 = ref<any>({})

	// 条状图
	const chartData3 = ref<any>({})
	const chartDataArr3 = ref<any[][]>([])
	const tabsCurrent3 = ref(0)
	const realCondition3 = ref([{ name: '数量' }, { name: '金额' }])

	// 折线图
	const chartData4 = ref<any>({})
	const chartDataArr4 = ref<any[][]>([])
	const tabsCurrent4 = ref(0)
	const realCondition4 = ref([{ name: '销量' }, { name: '销售额' }])

	// ========== methods ==========
	const getDataInfo = () => {
		request({
			config: {
			},
			url: 'plat_xiaoshou',
			method: 'POST',
			data: {},
			success: (ret : any) => {
				if (ret.status === 200) {
					cardData.value = dataInit.getInitByKanban('销售', ret.data)



					// 饼图
					chartData1.value = {
						ds5: ret.data.ds5.map((item : any) => ({
							name: item.ClientName,
							value: +item.Rate,
							type: 'pie'
						}))
					}
					chartData2.value = {
						ds6: ret.data.ds6.map((item : any) => ({
							name: item.ClientName,
							value: +item.Rate,
							type: 'pie'
						}))
					}

					// 条状图
					const ds7 = uni.$utils.deepClone(ret.data.ds7[0])
					delete ds7.ID
					delete ds7.name

					const grouped = groupData(ds7, '数量', '金额')
					const allData : any[][] = []
					grouped.forEach((item) => {
						const objData = Object.keys(item).map((key) => ({
							seriesName: key,
							name: '',
							value: ds7[key],
							type: 'bar'
						}))
						allData.push(objData)
					})

					chartDataArr3.value = allData
					chartData3.value = { ds7: allData[tabsCurrent3.value] }

					// 折线图
					chartDataArr4.value = setFormatter(ret.data.ds8)
					chartData4.value = { ds8: chartDataArr4.value[tabsCurrent4.value] }
				}
			}
		});
	}

	const groupData = (data : any, text1 : string, text2 : string) => {
		const result : any[] = []
		const quantityGroup : any = {}
		const amountGroup : any = {}

		for (const key in data) {
			if (key.includes(text1)) quantityGroup[key] = data[key]
			else if (key.includes(text2)) amountGroup[key] = data[key]
		}

		if (Object.keys(quantityGroup).length > 0) result.push(quantityGroup)
		if (Object.keys(amountGroup).length > 0) result.push(amountGroup)
		return result
	}

	const setFormatter = (data : any[]) => {
		const lastYearSales : any[] = []
		const thisYearSales : any[] = []

		data.forEach((item) => {
			lastYearSales.push(
				{ seriesName: '去年销量', name: item.Month, value: item.OldQty, type: 'line' },
				{ seriesName: '去年销售额', name: item.Month, value: item.OldMoney, type: 'line' }
			)
			thisYearSales.push(
				{ seriesName: '今年销量', name: item.Month, value: item.Qty, type: 'line' },
				{ seriesName: '今年销售额', name: item.Month, value: item.Money, type: 'line' }
			)
		})
		return [lastYearSales, thisYearSales]
	}

	const changeTopTabs = (data : any) => (tabsCurrent.value = data.index)
	const changeTopTabs3 = (data : any) => {
		tabsCurrent3.value = data.index
		chartData3.value = { ds7: chartDataArr3.value[tabsCurrent3.value] }
	}
	const changeTopTabs4 = (data : any) => {
		tabsCurrent4.value = data.index
		chartData4.value = { ds7: chartDataArr4.value[tabsCurrent4.value] }
	}

	// ========== lifecycle ==========
	onMounted(() => {
		const info = uni.$utils.deepClone(inventoryStore.Menu);
		Object.assign(basicInfo, info || {})
		getDataInfo()
	})
</script>

<style lang="scss" scoped>
	.page__content {
		background-color: #f2f2f2;
		height: 100vh;
	}

	.scrollWrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 180px;
		overflow-y: hidden;
		overflow-x: auto;
		row-gap: 3px;
		column-gap: 3px;

		&-item {
			width: 35vw;
			height: 80px;
			display: flex;
			flex-direction: column;
			background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
			border-radius: 5px;
			padding: 5px 10px;
			justify-content: center;
			align-items: center;
		}
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		background-color: #ffffff;
		margin-bottom: 10px;
		border-radius: 16rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 10px 10px;

			&-left {
				font-size: 16px;
				font-weight: 500;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
			position: relative;
		}
	}
</style>